<template>
  <view class="success-page">
    <!-- 返回按钮 -->
    <view class="back-button" @click="goToHome">
	  <image class="back-icon" src="/static/alibaba_icon/back.svg" mode="widthFix" style="width:36px; height:36px;" />
    </view>

    <!-- 成功图标和提示文字 -->
    <view class="success-content">
      <view class="icon-circle">
        <text class="check-icon">✔</text>
      </view>
      <text class="success-text">下单成功</text>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    // 返回首页
    goToHome() {
      uni.reLaunch({
        url: '/pages/index/index'
      });
    }
  }
};
</script>

<style scoped>
.success-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f3f3f3;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  background-color: #e0e0e0;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.back-icon {
  font-size: 20px;
  color: #333;
}

.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -60px;
}

.icon-circle {
  width: 100px;
  height: 100px;
  background-color: #4caf50;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.check-icon {
  font-size: 48px;
  color: white;
}

.success-text {
  font-size: 20px;
  color: #333;
  font-weight: bold;
}
</style>
